<template>
  <view>
    <child-header-bar :returnIndex="returnIndex" :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="go-content" :style="[{'top': top + 'px'}]">
      <view class="go-type-box">
        <view class="go-one-item"  @click="toEasyClear(goTypeItem)">
          <view class="one-item-title">
            {{goTypeItem.name}}
          </view>
          <view class="one-item-img">
            <image :src="goTypeItem.imgUrl" mode=""></image>
          </view>
        </view>
        <view class="go-item-list">
          <view class="go-item" @click="toEasyClear(item)" v-for="(item, index) in goTypeList" :key="index">
            <view class="one-item-title">
              {{item.name}}
            </view>
            <view class="one-item-img">
              <image :src="item.imgUrl" mode=""></image>
            </view>
          </view>
        </view>

      </view>
    </view>
    <zdy-tabbar :current-page="2"></zdy-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        returnIndex: true,
        childTitle: 'GO',
        imgUrl: this.$imgUrl,
        top: 0,
        goTypeItem: {
          name: '雪场',
          typeId: 0,
          imgUrl: this.$imgUrl + '/go/go-xuechang.png',
        },
        goTypeList: [{
          name: '餐饮',
          typeId: 2,
          imgUrl: this.$imgUrl + 'go/go-canyin.png',
        }, {
          name: '住宿',
          typeId: 3,
          imgUrl: this.$imgUrl + 'go/go-zhusu.png',
        }, {
          name: '交通',
          typeId: 4,
          imgUrl: this.$imgUrl + 'go/go-jiaotong.png',
        }, {
          name: '教学',
          typeId: 5,
          imgUrl: this.$imgUrl + 'go/go-jiaoxue.png',
        }, {
          name: '雪具',
          typeId: 6,
          imgUrl: this.$imgUrl + 'go/go-xueju.png',
        }, {
          name: '摄影',
          typeId: 7,
          imgUrl: this.$imgUrl + 'go/go-sheying.png',
        }, {
          name: '景点',
          typeId: 8,
          imgUrl: this.$imgUrl + 'go/go-fuwu.png',
        }, {
          name: '其他',
          typeId: 9,
          imgUrl: this.$imgUrl + 'go/go-qita.png',
        }, ]
      }
    },
    onLoad() {},
    onShow() {

    },
    mounted() {},
    methods: {
		onShareAppMessage() {
		  return {
		    title: 'GO',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: 'GO',
		    imageUrl: this.img,
		  }
				},
      toEasyClear(item) {
        if (item.name == '雪场') {
          uni.navigateTo({
            url: '/myPackageA/pages/easyClearSnowPack/easyClearSnowPack'
          })
        } else {
          uni.navigateTo({
            url: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=' + item.typeId
          })
        }
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>
<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss" scoped>
  .go-content {
    position: absolute;

    .go-type-box {
      padding: 50rpx 50rpx 150rpx 50rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .go-one-item {
        width: 650rpx;
        height: 275rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        position: relative;

        .one-item-title {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 649rpx;
          height: 68rpx;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 0rpx 0rpx 20rpx 20rpx;
          padding-left: 26rpx;
          padding-top: 17rpx;

          font-size: 32rpx;
          color: #FFFFFF;
        }

        .one-item-img {
          width: 650rpx;
          height: 275rpx;
          border-radius: 20rpx 20rpx 20rpx 20rpx;

          image {
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            width: 100%;
            height: 100%;

          }
        }
      }

      .go-item-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;

        .go-item {

          width: 305rpx;
          height: 220rpx;
          background: #FFFFFF;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          position: relative;
          margin-bottom: 20rpx;

          .one-item-title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 305rpx;
            height: 62rpx;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 0rpx 0rpx 20rpx 20rpx;
            padding-left: 30rpx;
            padding-top: 14rpx;
            
            font-size: 32rpx;
            color: #FFFFFF;
          }

          .one-item-img {
            width: 305rpx;
            height: 220rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            image {
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

    }

  }
</style>